<template>
  <div class="window-content">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!-- 基本信息 -->
      <el-tab-pane label="基本信息" name="first">
        <div class="population-type-button" v-if="!overseasPersonnelVisible">
            <div v-if="householdPopulationVisible">户籍人口</div>
            <div v-if="floatingPopulationVisible">流动人口</div>
        </div>
        <div class="base-info-container" v-if="!overseasPersonnelVisible">
            <div class="base-info">
                <table>
                    <tr height="40">
                        <td>姓名</td>
                        <td>{{peopleDetail.name}}</td>
                        <td>公民身份证号码</td>
                        <td colspan="3">{{peopleDetail.idCardNo}}</td>
                    </tr>
                    <tr height="40">
                        <td>曾用名</td>
                        <td >{{peopleDetail.usedName}}</td>
                        <td>联系方式</td>
                        <td >{{peopleDetail.mobile}}</td>
                        <td>出生日期</td>
                        <td >{{peopleDetail.birthday}}</td>
                    </tr>
                    <tr height="40">
                        <td>民族</td>
                        <td id="nation">{{computedToText(peopleDetail.nation,dictarrlist.NATION.value)}}</td>
                        <td>性别</td>
                        <td id="sex">{{computedToText(peopleDetail.sex,dictarrlist.SEX.value)}}</td>
                        <td>政治面貌</td>
                        <td id="politics">{{computedToText(peopleDetail.politics,dictarrlist.PARTY.value)}}</td>
                    </tr>
                    <tr height="40">
                        <td>籍贯</td>
                        <td th:text="nativePlace" id="nativePlace"></td>
                        <td>婚姻状况</td>
                        <td id="marriage">{{computedToText(peopleDetail.marriage,dictarrlist.MARITAL_STATUS.value)}}</td>
                        <td>学历</td>
                        <td id="education">{{computedToText(peopleDetail.education,dictarrlist.EDUCATION.value)}}</td>
                    </tr>
                    <tr height="40">
                        <td>宗教信仰</td>
                        <td id="religion">{{computedToText(peopleDetail.religion,dictarrlist.RELIGION.value)}}</td>
                        <td>职业类别</td>
                        <td id="professionType">{{peopleDetail.professionType}}</td>
                        <td>职业</td>
                        <td colspan="5">{{peopleDetail.profession}}</td>
                    </tr>
                    <tr height="40">
                        <td>户籍地</td>
                        <td colspan="5" id="householdAddr" class="align-left">{{householdAddr}}</td>
                    </tr>
                    <tr height="40">
                        <td>户籍门（楼）详址</td>
                        <td colspan="5" class="align-left">{{peopleDetail.householdAddrDetail}}</td>
                    </tr>
                    <tr height="40">
                        <td>现住地</td>
                        <td colspan="5" class="align-left">{{liveAddr}}</td>
                    </tr>
                    <tr height="40">
                        <td>现住门（楼）详址</td>
                        <td colspan="5" class="align-left">{{peopleDetail.liveAddrDetail}}</td>
                    </tr>
                    <tr height="40">
                        <td>服务处所</td>
                        <td colspan="5" class="align-left">{{peopleDetail.serviceSpace}}</td>
                    </tr>
                </table>
            </div>
            <div id="photo1" class="base-info-photo">
              <img :src="photoLink" />
            </div>
        </div>
        <div class="more-info-container" v-if="householdPopulationVisible">
            <div class="more-info">
                <table>
                    <tr>
                        <td>人户一致标识</td>
                        <td id="hpeopleInHouseholdsFlag">{{householdPopulation.peopleInHouseholdsFlag}}</td>
                        <td>户号</td>
                        <td >{{householdPopulation.householdNo}}</td>
                        <td>户主公民身份号码</td>
                        <td colspan="3" >{{householdPopulation.householderIdCard}}</td>
                    </tr>
                    <tr>
                        <td>户主姓名</td>
                        <td >{{householdPopulation.householderName}}</td>
                        <td>与户主关系</td>
                        <td id="hrelation"></td>
                        <td>户主联系方式</td>
                        <td colspan="3" >{{householdPopulation.householderContact}}</td>
                    </tr>
                </table>
            </div>
        </div>

        <div class="floating-info-container" v-if="floatingPopulationVisible">
            <div class="floating-info">
                <table>
                    <tr>
                        <td>流入原因</td>
                        <td id="inflowReason">{{computedToText(floatingPopulation.inflowReason,dictarrlist.INFLOWREASON.value)}}</td>
                        <td>住所类型</td>
                        <td id="residenceType">{{computedToText(floatingPopulation.residenceType,dictarrlist.LIU_RESIDENCETYPE.value)}}</td>
                        <td>是否重点关注人员</td>
                        <td colspan="3" >{{floatingPopulation.isFocusOn === '2'?'是':'否'}}</td>
                    </tr>
                    <tr>
                        <td>办证类型</td>
                        <td id="cardType">{{computedToText(floatingPopulation.cardType,dictarrlist.LIU_CARDTYPE.value)}}</td>
                        <td>证件号码</td>
                        <td colspan="3" >{{floatingPopulation.cardNo}}</td>
                    </tr>
                    <tr>
                        <td>登记日期</td>
                        <td >{{floatingPopulation.recordDate}}</td>
                        <td>证件到期日期</td>
                        <td colspan="3">{{floatingPopulation.dueDate}}</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="population-type-button" v-if="leavePopulationVisible">
            <div>留守人员</div>
        </div>
        <div class="leave-info-container" v-if="leavePopulationVisible">
            <div class="leave-info">
                <table>
                    <tr>
                        <td>健康状况</td>
                        <td id="healthy">{{householdPopulation.healthy}}</td>
                        <td>家庭年收入</td>
                        <td >{{householdPopulation.income}}</td>
                        <td>留守人员类型</td>
                        <td id="stayType">{{householdPopulation.stayType}}</td>
                    </tr>
                    <tr>
                        <td>人户一致标识</td>
                        <td id="hppeopleInHouseholdsFlag">{{householdPopulation.peopleInHouseholdsFlag}}</td>
                        <td>家庭主要成员<br>身份号码</td>
                        <td >{{householdPopulation.mainCard}}</td>
                        <td>与留守人员关系</td>
                        <td id="stayRelation">{{householdPopulation.stayRelation}}</td>
                    </tr>
                    <tr>
                        <td>家庭主要成员<br>健康状况</td>
                        <td id="mainHealthy">{{householdPopulation.mainHealthy}}</td>
                        <td>家庭主要成员姓名</td>
                        <td colspan="3" >{{householdPopulation.mainName}}</td>
                    </tr>
                    <tr>
                        <td>家庭主要成员<br>详细地址</td>
                        <td colspan="5" >{{householdPopulation.mainWorkAdd}}</td>
                    </tr>
                    <tr>
                        <td>困难及诉求</td>
                        <td colspan="5" >{{householdPopulation.demand}}</td>
                    </tr>
                    <tr>
                        <td>帮扶情况</td>
                        <td colspan="5" >{{householdPopulation.supportCase}}</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="population-type-button" v-if="overseasPersonnelVisible">
            <!--v-if="overseasPersonnelVisible"-->
            <div>外籍人员</div>
        </div>
        <div class="foreigner-info-container" v-if="overseasPersonnelVisible">
            <div class="foreigner-info">
                <table>
                    <tr>
                        <td>外文姓</td>
                        <td >{{overseasPersonnel.lastName}}</td>
                        <td>外文名</td>
                        <td >{{overseasPersonnel.firstName}}</td>
                        <td>中文姓名</td>
                        <td >{{peopleDetail.name}}</td>
                    </tr>
                    <tr>
                        <td>性别</td>
                        <td id="sex2">{{computedToText(peopleDetail.sex,dictarrlist.SEX.value)}}</td>
                        <td>出生日期</td>
                        <td>{{peopleDetail.birthday}}</td>
                        <td>国籍（地区）</td>
                        <td id="nationality">{{overseasPersonnel.nationality}}</td>
                    </tr>
                    <tr>
                        <td>宗教信仰</td>
                        <td id="religion2">{{computedToText(peopleDetail.religion,dictarrlist.RELIGION.value)}}</td>
                        <td>来华目的</td>
                        <td id="purpose">{{overseasPersonnel.purpose}}</td>
                        <td>证件代码</td>
                        <td id="cardCode" >{{overseasPersonnel.cardCode}}</td>
                    </tr>
                    <tr>
                        <td>证件号码</td>
                        <td >{{peopleDetail.idCardNo}}</td>
                        <td>证件有效期</td>
                        <td >{{overseasPersonnel.cardDueDate}}</td>
                        <td>联系方式</td>
                        <td >{{peopleDetail.mobile}}</td>
                    </tr>
                    <tr>
                        <td>职业类别</td>
                        <td colspan="3" id="professionType2">{{peopleDetail.professionType}}</td>
                        <td>职业</td>
                        <td >{{peopleDetail.profession}}</td>
                    </tr>
                    <tr>
                        <td>服务处所</td>
                        <td colspan="5" >{{peopleDetail.serviceSpace}}</td>
                    </tr>
                    <tr>
                        <td>现住地</td>
                        <td >{{liveAddr}}</td>
                        <td>现住地详址</td>
                        <td colspan="3" >{{peopleDetail.liveAddrDetail}}</td>
                    </tr>
                    <tr>
                        <td>抵达日期</td>
                        <td >{{overseasPersonnel.arrivalDate}}</td>
                        <td>预计离开日期</td>
                        <td >{{overseasPersonnel.expectedLeaveDate}}</td>
                        <td>是否重点关注人员</td>
                        <td >{{overseasPersonnel.isFocusOn === '2'?'是':'否'}}</td>
                    </tr>
                </table>
            </div>
            <div class="foreigner-info-photo"><img :src="photoLink" /></div>
        </div>
      </el-tab-pane>

      <!-- 同户关系 -->
      <el-tab-pane label="同户关系" name="second">
        <div class="nav">
          <table class="same-table same-house">
            <thead>
              <tr>
                  <td>户号</td>
                  <td>姓名</td>
                  <td>与户主关系</td>
                  <td>性别</td>
                  <td>民族</td>
                  <td>籍贯</td>
                  <td>证件号码</td>
                  <td>现住地址</td>
              </tr>
            </thead>
              <tbody>
                <tr v-for="people in sameHouseHold">
                    <td>{{ people.householdNo }}</td>
                    <td>{{ people.name }}</td>
                    <td>{{ people.relation }}</td>
                    <td>{{ people.sex }}</td>
                    <td>{{ people.nation }}</td>
                    <td>{{ people.nativePlace }}</td>
                    <td>{{ people.idCardNo }}</td>
                    <td>{{ people.liveAddr }}</td>
                </tr>
              </tbody>
          </table>
        </div>
      </el-tab-pane>

      <!-- 同住关系 -->
      <el-tab-pane label="同住关系" name="third">
        <div class="nav">
          <table class="same-table same-live">
              <thead>
              <tr>
                  <td>姓名</td>
                  <td>性别</td>
                  <td>民族</td>
                  <td>职业</td>
                  <td>籍贯</td>
                  <td>联系方式</td>
                  <td>证件号码</td>
                  <!--<td>现住地址</td>-->
              </tr>
              </thead>
              <tbody>
              <tr v-for="people in cohabit">
                  <td>{{ people.name }}</td>
                  <td>{{ people.sex }}</td>
                  <td>{{ people.nation }}</td>
                  <td>{{ people.frofession }}</td>
                  <td>{{ people.nativePlace }}</td>
                  <td>{{ people.mobile }}</td>
                  <td>{{ people.idCardNo }}</td>
              </tr>
              </tbody>
          </table>
        </div>
      </el-tab-pane>

      <!-- 特殊人群 -->
      <el-tab-pane label="特殊人群" name="fourth" v-if="focusFlag">
        <div class="nav">
            <div class="special-people-button">
                <div style="background-color: rgb(44,158,36);" v-if="releasePersonnel.id" onclick="slide(this)"
                     data-id="#releasePersonnelDiv">刑满释放
                </div>
                <div style="background-color: rgb(247,156,24);" v-if="correctPersonnel.id" onclick="slide(this)"
                     data-id="#correctPersonnelDiv">社区矫正
                </div>
                <div style="background-color: rgb(47,177,59);" v-if="mentalPatient.id" onclick="slide(this)"
                     data-id="#mentalPatientDiv">肇事肇祸
                </div>
                <div style="background-color: rgb(76,71,180);" v-if="drugAddicts.id" onclick="slide(this)"
                     data-id="#drugAddictsDiv">吸毒人员
                </div>
                <div style="background-color: rgb(248,60,131);" v-if="aidsPatients.id" onclick="slide(this)"
                     data-id="#aidsPatientsDiv">艾滋病
                </div>
                <div style="background-color: rgb(96,96,56);" v-if="keyYouth.id" onclick="slide(this)"
                     data-id="#keyYouthDiv">重点青少年
                </div>
            </div>
            <div class="base-info-button">
                <div>基本信息</div>
                <div id="baseInfoButton" class="list-down"></div>
            </div>
            <div class="tip-label" onclick="$('#baseInfoContainer').toggleClass('hide');$('#baseInfoButton').toggleClass('list-down');" style="margin-bottom:10px;">
                点击显示该人员基本信息
            </div>

            <div id="baseInfoContainer" class="base-info-container hide">
                <div class="base-info">
                    <table>
                        <tr>
                            <td>姓名</td>
                            <td>{{peopleDetail.name}}</td>
                            <td>公民身份证号码</td>
                            <td colspan="3" th:text="${peopleDetail.idCardNo}"></td>
                        </tr>
                        <tr>
                            <td>曾用名</td>
                            <td >{{peopleDetail.usedName}}</td>
                            <td>联系方式</td>
                            <td >{{peopleDetail.mobile}}</td>
                            <td>出生日期</td>
                            <td >{{peopleDetail.birthday}}</td>
                        </tr>
                        <tr>
                            <td>民族</td>
                            <td id="nation1">{{computedToText(peopleDetail.nation,dictarrlist.NATION.value)}}</td>
                            <td>性别</td>
                            <td id="sex1">{{computedToText(peopleDetail.sex,dictarrlist.SEX.value)}}</td>
                            <td>政治面貌</td>
                            <td id="politics1">{{computedToText(peopleDetail.politics,dictarrlist.PARTY.value)}}</td>
                        </tr>
                        <tr>
                            <td>籍贯</td>
                            <td >{{peopleDetail.nativePlace}}</td>
                            <td>婚姻状况</td>
                            <td id="marriage1">{{computedToText(peopleDetail.marriage,dictarrlist.MARITAL_STATUS.value)}}</td>
                            <td>学历</td>
                            <td id="education1">{{computedToText(peopleDetail.education,dictarrlist.EDUCATION.value)}}</td>
                        </tr>
                        <tr>
                            <td>宗教信仰</td>
                            <td id="religion1">{{computedToText(peopleDetail.religion,dictarrlist.RELIGION.value)}}</td>
                            <td>职业类别</td>
                            <td id="professionType1">{{peopleDetail.professionType}}</td>
                            <td>职业</td>
                            <td >{{peopleDetail.profession}}</td>
                        </tr>
                        <tr>
                            <td>户籍地</td>
                            <td >{{householdAddr}}</td>
                            <td>户籍门（楼）详址</td>
                            <td colspan="3" :text="peopleDetail.householdAddrDetail"></td>
                        </tr>
                        <tr>
                            <td>现住地</td>
                            <td th:text="${liveAddr}"></td>
                            <td>现住门（楼）详址</td>
                            <td colspan="3" >{{peopleDetail.liveAddrDetail}}</td>
                        </tr>
                        <tr>
                            <td>服务处所</td>
                            <td colspan="5" >{{peopleDetail.serviceSpace}}</td>
                        </tr>
                    </table>
                </div>
                <div id="photo2" class="base-info-photo"><img :src="photoLink" /></div>
            </div>

            <div class="population-type-button" id="releasePersonnelDiv" v-if="releasePersonnel.id" style="width:100%">
                <div style="width:100%">刑满释放</div>
            </div>
            <div class="leave-info-container" v-if="releasePersonnel.id">
                <div class="leave-info">
                    <table>
                        <tr>
                            <td>原罪名</td>
                            <td>{{ releasePersonnel.originalCharges }}</td>
                            <td>原判刑期</td>
                            <td>{{ releasePersonnel.originalSentence }}</td>
                            <td>是否累犯</td>
                            <td>{{ releasePersonnel.isRecidivism === 2 ? '是' : '否' }}</td>
                        </tr>
                        <tr>
                            <td>释放日期</td>
                            <td>{{ releasePersonnel.releaseDate }}</td>
                            <td>服刑场所</td>
                            <td>{{ releasePersonnel.imprisonmentAddr }}</td>
                            <td>危险评估类型</td>
                            <td>{{ computedToText(releasePersonnel.dangerType,dictarrlist.RISK_ASSESSMENT.value) }}</td>
                        </tr>
                        <tr>
                            <td>衔接日期</td>
                            <td>{{ releasePersonnel.connectDate }}</td>
                            <td>衔接情况</td>
                            <td colspan="3">{{ computedToText(releasePersonnel.connectSituation,dictarrlist.CONNECTION_SITUATION.value) }}</td>
                        </tr>
                        <tr>
                            <td>安置日期</td>
                            <td>{{ releasePersonnel.placementDate }}</td>
                            <td>安置情况</td>
                            <td colspan="3">{{ computedToText(releasePersonnel.placementSituation,dictarrlist.RESETTLEMENT.value) }}</td>
                        </tr>
                        <tr>
                            <td>是否重新犯罪</td>
                            <td>{{ releasePersonnel.isCrimeAgain === '2' ? '是' : '否' }}</td>
                            <td>重新犯罪罪名</td>
                            <td colspan="3">{{ releasePersonnel.crimeAgainName }}</td>
                        </tr>
                        <tr>
                            <td>未安置原因</td>
                            <td colspan="5">{{ releasePersonnel.noPlacementReason }}</td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="population-type-button" id="correctPersonnelDiv" v-if="correctPersonnel.id" style="width:100%">
                <div style="width:100%;border:none!important;">社区矫正</div>
            </div>
            <div class="leave-info-container" style="height: 330px;" v-if="correctPersonnel.id">
                <div class="leave-info" style="height:99%;">
                    <table>
                        <tr>
                            <td>人员编号</td>
                            <td>{{ correctPersonnel.correctPersonnelCode }}</td>
                            <td>原羁押场所</td>
                            <td>{{ correctPersonnel.originalCustodyAddr }}</td>
                            <td>案件类别</td>
                            <td>{{ computedToText(correctPersonnel.caseType,dictarrlist.CASE_TYPE.value) }}</td>
                        </tr>
                        <tr>
                            <td>矫正类别</td>
                            <td>{{ computedToText(correctPersonnel.correctType,dictarrlist.CORRECT_CATEGORY.value) }}</td>
                            <td>具体罪名</td>
                            <td>{{ correctPersonnel.concreteAccusation }}</td>
                            <td>原判刑期</td>
                            <td>{{ correctPersonnel.originalSentencingPeriod }}</td>
                        </tr>
                        <tr>
                            <td>原判刑开始日期</td>
                            <td>{{ correctPersonnel.sentencingPeriodStartDate }}</td>
                            <td>原判刑结束日期</td>
                            <td>{{ correctPersonnel.sentencingPeriodEndDate }}</td>
                            <td>矫正开始日期</td>
                            <td>{{ correctPersonnel.correctStartDate }}</td>
                        </tr>
                        <tr>
                            <td>矫正结束日期</td>
                            <td>{{ correctPersonnel.correctEndDate }}</td>
                            <td>接收方式</td>
                            <td>{{ computedToText(correctPersonnel.receiveMode,dictarrlist.RECEIVING_MODE.value) }}</td>
                            <td>四史情况</td>
                            <td>{{ computedToText(correctPersonnel.historySituation,dictarrlist.FOUR_HISTORY.value) }}</td>
                        </tr>
                        <tr>
                            <td>是否累惯犯</td>
                            <td>{{ correctPersonnel.isRecidivism === '2' ? '是' : '否' }}</td>
                            <td>三涉情况</td>
                            <td>{{ computedToText(correctPersonnel.involveSituation,dictarrlist.THREE_SITUATION.value) }}</td>
                            <td>是否建立矫正小组</td>
                            <td>{{ correctPersonnel.isBuildTeam === '2' ? '是' : '否' }}</td>
                        </tr>
                        <tr>
                            <td>矫正小组人员</td>
                            <td>{{ computedToText(correctPersonnel.personnelComposition,dictarrlist.CORRECTION_TEAM_MEMBERS.value) }}</td>
                            <td>矫正解除类型</td>
                            <td>{{ computedToText(correctPersonnel.releaseType,dictarrlist.CORRECT_LIFT.value) }}</td>
                            <td>是否有托管</td>
                            <td>{{ correctPersonnel.isOffControl === '2' ? '是' : '否' }}</td>
                        </tr>
                        <tr>
                            <td>托管原因</td>
                            <td>{{ correctPersonnel.offControlReason }}</td>
                            <td>检查监督托管情况</td>
                            <td>{{ correctPersonnel.offControlSituation }}</td>
                            <td>托管纠正情况</td>
                            <td>{{ correctPersonnel.offControlCorrectSituation }}</td>
                        </tr>
                        <tr>
                            <td>是否有漏管</td>
                            <td>{{ correctPersonnel.isMissControl === '2' ? '是' : '否' }}</td>
                            <td>漏管原因</td>
                            <td>{{ correctPersonnel.missControlReason }}</td>
                            <td>检查监督漏管情况</td>
                            <td>{{ correctPersonnel.missControlSituation }}</td>
                        </tr>
                        <tr>
                            <td>漏管纠正情况</td>
                            <td>{{ correctPersonnel.missControlCorrectSituation }}</td>
                            <td>奖惩情况</td>
                            <td>{{ correctPersonnel.sanctionSituation }}</td>
                            <td>刑罚变更执行情况</td>
                            <td>{{ correctPersonnel.executeSituation }}</td>
                        </tr>
                        <tr>
                            <td>是否重新犯罪</td>
                            <td>{{ correctPersonnel.isCrimeAgain === '2' ? '是' : '否' }}</td>
                            <td>重新犯罪名称</td>
                            <td colspan="3">{{ correctPersonnel.crimeAgainName }}</td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="population-type-button" id="mentalPatientDiv" v-if="mentalPatient.id">
                <div>精神障碍患者</div>
            </div>
            <div class="leave-info-container" style="height: 200px;" v-if="mentalPatient.id">
                <div class="leave-info">
                    <table>
                        <tr>
                            <td>家庭经济情况</td>
                            <td>{{ computedToText(mentalPatient.familyFinancialStatus,dictarrlist.FAMILY_FINANCIAL_STATUS.value) }}</td>
                            <td>是否纳入低保</td>
                            <td>{{ mentalPatient.isIncludedInTheLow }}</td>
                            <td>监护人身份证号</td>
                            <td>{{ mentalPatient.guardianIdCard }}</td>
                        </tr>
                        <tr>
                            <td>监护人姓名</td>
                            <td>{{ mentalPatient.guardianName }}</td>
                            <td>监护人联系方式</td>
                            <td>{{ mentalPatient.guardianContact }}</td>
                            <td>初次发病日期</td>
                            <td>{{ mentalPatient.firstOnsetDate }}</td>
                        </tr>
                        <tr>
                            <td>目前诊断类型</td>
                            <td>{{ computedToText(mentalPatient.diagnosisType,dictarrlist.DIAGNOSISTYPE.value) }}</td>
                            <td>有无肇事肇祸史</td>
                            <td>{{ mentalPatient.isTroublemaking }}</td>
                            <td>肇事肇祸次数</td>
                            <td>{{ mentalPatient.troublemakingAmount }}</td>
                        </tr>
                        <tr>
                            <td>上次肇事肇祸日期</td>
                            <td>{{ mentalPatient.lastTroublemakingDate }}</td>
                            <td>目前危险性评估</td>
                            <td>{{ computedToText(mentalPatient.dangerLevel,dictarrlist.RISK_ASSESSMENT_GRADE.value) }}</td>
                            <td>治疗情况</td>
                            <td>{{ computedToText(mentalPatient.treatmentSituation,dictarrlist.TREATMENT.value) }}</td>
                        </tr>
                        <tr>
                            <td>治疗医院名称</td>
                            <td>{{ mentalPatient.treatmentHospitalName }}</td>
                            <td>实施住院治疗原因</td>
                            <td>{{ computedToText(mentalPatient.treatmentReason,dictarrlist.REASONS_FOR_HOSPITALIZATION.value) }}</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td>康复训练机构名称</td>
                            <td>{{ mentalPatient.receiveTrainingInstitution }}</td>
                            <td>参与管理人员</td>
                            <td>{{ computedToText(mentalPatient.manager,dictarrlist.PARTICIPATING_MANAGERS.value) }}</td>
                            <td>帮扶情况</td>
                            <td>未提供</td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="population-type-button" id="drugAddictsDiv" v-if="drugAddicts.id">
                <div>吸毒人员</div>
            </div>
            <div class="leave-info-container" style="height: 132px;" v-if="drugAddicts.id">
                <div class="leave-info">
                    <table>
                        <tr>
                            <td>初次发现日期</td>
                            <td>{{ drugAddicts.firstFoundDate }}</td>
                            <td>管控情况</td>
                            <td>{{ drugAddicts.controlSituation }}</td>
                            <td>管控人姓名</td>
                            <td>{{ drugAddicts.controllerName }}</td>
                        </tr>
                        <tr>
                            <td>管控人联系方式</td>
                            <td>{{ drugAddicts.controllerContact }}</td>
                            <td>帮扶情况</td>
                            <td>{{ drugAddicts.helpSituation }}</td>
                            <td>帮扶人姓名</td>
                            <td>{{ drugAddicts.helperName }}</td>
                        </tr>
                        <tr>
                            <td>帮扶人联系方式</td>
                            <td>{{ drugAddicts.helperContact }}</td>
                            <td>有无犯罪史</td>
                            <td>{{ drugAddicts.isCrime }}</td>
                            <td>犯罪情况</td>
                            <td>{{ drugAddicts.crimeSituation }}</td>
                        </tr>
                        <tr>
                            <td>吸毒原因</td>
                            <td>{{ computedToText(drugAddicts.drugReason,dictarrlist.DRUGS_CAUSE.value) }}</td>
                            <td>吸毒后果</td>
                            <td colspan="3">{{ computedToText(drugAddicts.drugConsequence,dictarrlist.CONSEQUENCES_OF_DRUG_USE.value) }}</td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="population-type-button" id="aidsPatientsDiv" v-if="aidsPatients.id">
                <div>艾滋病人</div>
            </div>
            <div class="leave-info-container" style="height: 132px;" v-if="aidsPatients.id">
                <div class="leave-info">
                    <table>
                        <tr>
                            <td>感染途径</td>
                            <td>{{ computedToText(aidsPatients.infectionRoute,dictarrlist.ROUTE_OF_INFECTION.value) }}</td>
                            <td>有无违法犯罪史</td>
                            <td>{{ aidsPatients.isCrime }}</td>
                            <td>违法犯罪情况</td>
                            <td>{{ aidsPatients.crimeSituation }}</td>
                        </tr>
                        <tr>
                            <td>关注类型</td>
                            <td>{{ computedToText(aidsPatients.focusOnType,dictarrlist.TYPE_OF_CONCERN.value) }}</td>
                            <td>案件类别</td>
                            <td>{{ computedToText(aidsPatients.caseType,dictarrlist.CASE_TYPE.value) }}</td>
                            <td>帮扶情况</td>
                            <td>{{ aidsPatients.helpSituation }}</td>
                        </tr>
                        <tr>
                            <td>帮扶人姓名</td>
                            <td>{{ aidsPatients.helperName }}</td>
                            <td>帮扶人联系方式</td>
                            <td>{{ aidsPatients.helperContact }}</td>
                            <td>收治情况</td>
                            <td>{{ computedToText(aidsPatients.receiveSituation,dictarrlist.TREATED_CASE.value) }}</td>
                        </tr>
                        <tr>
                            <td>收治机构名称</td>
                            <td colspan="5">{{ aidsPatients.receiveOrgName }}</td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="population-type-button" id="keyYouthDiv" v-if="keyYouth.id">
                <div>重点青少年</div>
            </div>
            <div class="leave-info-container" style="height: 165px;" v-if="keyYouth.id">
                <div class="leave-info">
                    <table>
                        <tr>
                            <td>人员类型</td>
                            <td>{{ computedToText(keyYouth.personnelType,dictarrlist.PERSONNEL_TYPE.value) }}</td>
                            <td>家庭情况</td>
                            <td>{{ computedToText(keyYouth.familySituation,dictarrlist.FAMILY_SITUATION.value) }}</td>
                            <td>监护人身份号码</td>
                            <td>{{ keyYouth.guardianIdCard }}</td>
                        </tr>
                        <tr>
                            <td>监护人姓名</td>
                            <td>{{ keyYouth.guardianName }}</td>
                            <td>与监护人关系</td>
                            <td>{{ keyYouth.relation }}</td>
                            <td>监护人联系方式</td>
                            <td>{{ keyYouth.guardianContact }}</td>
                        </tr>
                        <tr>
                            <td>监护人居住详址</td>
                            <td>{{ keyYouth.guardianAddrDetail }}</td>
                            <td>是否违法犯罪</td>
                            <td>{{ keyYouth.isCrime }}</td>
                            <td>违法犯罪情况</td>
                            <td>{{ keyYouth.crimeSituation }}</td>
                        </tr>
                        <tr>
                            <td>帮扶人姓名</td>
                            <td>{{ keyYouth.helperName }}</td>
                            <td>帮扶人联系方式</td>
                            <td>{{ keyYouth.helperContact }}</td>
                            <td>帮扶手段</td>
                            <td>{{ computedToText(keyYouth.helpMode,dictarrlist.HELPING_MEANS.value) }}</td>
                        </tr>
                        <tr>
                            <td>帮扶情况</td>
                            <td colspan="5">{{ keyYouth.helpSituation }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import $ from "@/assets/jquery-vendor.js";
import "@/assets/css/gis/peopleDetail.css";

import {peopleDetail,getFamilyRelationList,getLiveRelationList,getSpecialInfo,selectAllPath,codeList} from "@/api/xapply/doubleReal/peopleGis"

let dict_arr = {CASE_TYPE,SEX,LIU_RESIDENCETYPE,LIU_CARDTYPE, INFLOWREASON,MARITAL_STATUS,CORRECTION_TEAM_MEMBERS,CORRECT_CATEGORY, CORRECT_LIFT, RECEIVING_MODE, RISK_ASSESSMENT,FOUR_HISTORY,THREE_SITUATION,DRUGS_CAUSE,CONSEQUENCES_OF_DRUG_USE, PERSONNEL_TYPE,FAMILY_SITUATION,HELPING_MEANS,FAMILY_FINANCIAL_STATUS,DIAGNOSISTYPE,RISK_ASSESSMENT_GRADE,TREATMENT,REASONS_FOR_HOSPITALIZATION ,PARTICIPATING_MANAGERS, CONNECTION_SITUATION,RESETTLEMENT,ROUTE_OF_INFECTION, TYPE_OF_CONCERN,TREATED_CASE,RELIGION,EDUCATION,NATION,PARTY}

//引入字典类型
import {CASE_TYPE,SEX,LIU_RESIDENCETYPE,LIU_CARDTYPE, INFLOWREASON,MARITAL_STATUS,CORRECTION_TEAM_MEMBERS,CORRECT_CATEGORY, CORRECT_LIFT, RECEIVING_MODE, RISK_ASSESSMENT,FOUR_HISTORY,THREE_SITUATION,DRUGS_CAUSE,CONSEQUENCES_OF_DRUG_USE, PERSONNEL_TYPE,FAMILY_SITUATION,HELPING_MEANS,FAMILY_FINANCIAL_STATUS,DIAGNOSISTYPE,RISK_ASSESSMENT_GRADE,TREATMENT,REASONS_FOR_HOSPITALIZATION ,PARTICIPATING_MANAGERS, CONNECTION_SITUATION,RESETTLEMENT,ROUTE_OF_INFECTION, TYPE_OF_CONCERN,TREATED_CASE,RELIGION,EDUCATION,NATION,PARTY} from '@/config/dictItemArr'

export default {
  name: 'peopleDetail',
  props:['peopleId','dictArr'],
  data() {
    return {
      dictarrlist:dict_arr,
      activeName: 'first',
      householdPopulationVisible: true,
      householdPopulation:[],
      floatingPopulationVisible: false,
      floatingPopulation:[],
      overseasPersonnelVisible: false,
      leavePopulationVisible: false,
      householdAddr:'',
      liveAddr:'',
      peopleId: this.peopleId,
      dictItemArr:this.dictArr,
      houseId: "",
      houseNo: "",
      cohabitFlag: false,
      sameHouseHoldFlag: false,
      focusOnFlag: false,
      cohabit: [],
      sameHouseHold: [],
      focusOn: {},
      correctPersonnel: {},
      drugAddicts: {},
      keyYouth: {},
      mentalPatient: {},
      releasePersonnel: {},
      aidsPatients: {},
      focusFlag: true,
      peopleDetail: {},
      overseasPersonnel: {},
      photoLink:'', //头像地址
    };
  },

  created() {
    this.init();

    //加载数据
    this.initData()
  },

  //方法
  methods: {
    //tab标签单击事件
    handleClick(tab, event) {
      console.log("tab",tab)
      switch (tab.name) {
        case "second":
          //同户关系
          this.getSameHouseHold();
          break;
        case "third":
          //同住关系
          this.getCohabit();
          break;
        case "fourth":
          //特殊人群
          this.getFocusOn();
          break;
      }
    },

    //加载数据
    init(){
      peopleDetail(this.peopleId).then(res=>{
        console.log("people_res:",res)
        this.floatingPopulation = res.data.floatingPopulation
        this.householdPopulation = res.data.householdPopulation
        this.overseasPersonnel = res.data.overseasPersonnel
        this.peopleDetail = res.data.peopleDetail
        this.householdAddr = res.data.householdAddr

        //户籍人员
        if(res.data.householdPopulation && res.data.householdPopulation.id > 0){
          this.householdPopulationVisible = true

          //留守人员
          this.leavePopulationVisible = !res.data.householdPopulation.isStay ? false : (res.data.householdPopulation.isStay !== '' ? true : false)
        }else{
          this.householdPopulationVisible = false
          this.leavePopulationVisible = false
        }

        //流动人口
        if(res.data.floatingPopulation && res.data.floatingPopulation.id > 0){
          this.floatingPopulationVisible = true
        }else{
          this.floatingPopulationVisible = false
        }

        //涉恐人员
        if(res.data.overseasPersonnel && res.data.overseasPersonnel.id > 0){
          this.overseasPersonnelVisible = true
        }else{
          this.overseasPersonnelVisible = false
        }

        //判断头像
        if (res.data.peopleDetail.photoLink) {
          this.photoLink = res.data.peopleDetail.photoLink
        } else if (res.data.peopleDetail.sex === "1") {
          this.photoLink = '/img/man_default.jpg'
        } else {
          this.photoLink = '/img/woman_default.png'
        }
      }).catch(error=>{
        console.log("people_error:",error)
      })
    },

    //同户关系
    getSameHouseHold() {
      console.log("sameHouseHoldFlag:",this.sameHouseHoldFlag)
      console.log("householdNo:",this.householdPopulation.householdNo)
      if (this.sameHouseHoldFlag || !this.householdPopulation.householdNo)
        return;

      console.log("second:")
      getFamilyRelationList(this.householdPopulation.householdNo).then(result=>{
        this.sameHouseHold = result.data;

        this.sameHouseHoldFlag = true;
      })
    },

    //同住关系
    getCohabit() {
      console.log("cohabitFlag:",this.cohabitFlag)
      console.log("houseId:",this.peopleDetail.houseId)
      if (this.cohabitFlag || !this.peopleDetail.houseId)
        return;

      console.log("third:")
      getLiveRelationList(this.peopleDetail.houseId).then(res=>{
        this.cohabit = res.data;
        this.cohabitFlag = true;
      })
    },

    //特殊人群
    getFocusOn() {
      console.log("focusOnFlag:",this.focusOnFlag)
      if (this.focusOnFlag)
        return;

      console.log("fourth:")
      getSpecialInfo(this.peopleId).then(res=>{
        let result = res.data

        if (result.correctPersonnel !== "") {
            // selectAllPath(result.correctPersonnel.caseType,this.dictarrlist.CASE_TYPE.value).then(rss=>{
            //   result.correctPersonnel.caseType = rss.data;
            // })

            for (let p in result.correctPersonnel) {
                if (result.correctPersonnel[p] == 'Y') {
                    result.correctPersonnel[p] = "是";
                } else if (result.correctPersonnel[p] == 'N') {
                    result.correctPersonnel[p] = "否";
                }
            }

            this.correctPersonnel = result.correctPersonnel;
        }

        if (result.drugAddicts !== "") {
            for (let p in result.drugAddicts) {
                if (result.drugAddicts[p] == 'Y') {
                    result.drugAddicts[p] = "是";
                } else if (result.drugAddicts[p] == 'N') {
                    result.drugAddicts[p] = "否";
                }
            }

            this.drugAddicts = result.drugAddicts;
        }

        if (result.keyYouth !== "") {
            for (let p in result.keyYouth) {
                if (result.keyYouth[p] == 'Y') {
                    result.keyYouth[p] = "是";
                } else if (result.keyYouth[p] == 'N') {
                    result.keyYouth[p] = "否";
                }
            }

            this.keyYouth = result.keyYouth;
        }

        if (result.mentalPatient !== "") {
            if (result.mentalPatient.isTroublemaking == '1') {
                result.mentalPatient.isTroublemaking = "有";
            } else {
                result.mentalPatient.isTroublemaking = "无";
            }

            for (let p in result.mentalPatient) {
                if (result.mentalPatient[p] == 'Y') {
                    result.mentalPatient[p] = "是";
                } else if (result.mentalPatient[p] == 'N') {
                    result.mentalPatient[p] = "否";
                }
            }


            this.mentalPatient = result.mentalPatient;
        }

        if (result.releasePersonnel !== "") {
            for (let p in result.releasePersonnel) {
                if (result.releasePersonnel[p] == 'Y') {
                    result.releasePersonnel[p] = "是";
                } else if (result.releasePersonnel[p] == 'N') {
                    result.releasePersonnel[p] = "否";
                }
            }

            this.releasePersonnel = result.releasePersonnel;
        }

        if (result.aidsPatients !== "") {
            for (let p in result.aidsPatients) {
                if (result.aidsPatients[p] == 'Y') {
                    result.aidsPatients[p] = "是";
                } else if (result.aidsPatients[p] == 'N') {
                    result.aidsPatients[p] = "否";
                }
            }
            this.aidsPatients = result.aidsPatients;
        }

        this.focusOnFlag = true;
      })
    },

    //加载数据
    initData(){
      let _this = this
      //加载字典类型
      for(let key in _this.dictarrlist){
        let flag = _this.dictarrlist[key].value

        codeList(flag).then(result=>{
          let cloneResult = JSON.parse(JSON.stringify(result.data))
          //插入头部一个空值
          cloneResult.unshift({value:'',text:'无'})

          _this.dictItemArr[flag] = cloneResult

          let textV = _this.dictarrlist[key].text

          result.data.unshift({value:'',text:textV})

          _this[flag] = result.data
        })
      }
      // console.log("end",this.dictarrlist.CASE_TYPE)

    },

    //计算属性
    computedToText(type,flag){
      if(this.dictItemArr && this.dictItemArr[flag]){
          for(let i=0;i<this.dictItemArr[flag].length;i++){
              if(this.dictItemArr[flag][i].value === type){
                  return this.dictItemArr[flag][i].text;
              }
          }
      }
      return "";
    },

  },

  beforeDestroy() {
    // if (this.view) {
    //   this.view.container = null
    // }
  },
}

</script>

<style lang="scss" scoped>

</style>
